<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue基础渲染</title>
</head>
<body>
  <div id="app">
    <p>{{ msg }}</p>
    <p>{{ name }}</p>
  </div>
  <script>
    const regMustache = /\{\{\s*(\S+)\s*\}\}/
    const app = document.querySelector('#app')
    let data = {
      msg: 'hello',
      name: 'Alan'
    }
    // 创建了一虚拟的节点对象
    const fragment = document.createDocumentFragment()
    // 把app里面的元素放入fragment
    while (childNode = app.firstChild) {
      // 把第一个元素放入
      fragment.appendChild(childNode)
    }
    // 将数据放到模板中
    function compiler(template, data) {
      const childNodes = template.childNodes
      // console.log('childNodes', childNodes)
      for (let i = 0; i < childNodes.length; i++) {
        // 获取节点类型
        const type = childNodes[i].nodeType
        if (type == 3) { // 是文本节点
          let nodeValue = childNodes[i].nodeValue // 获取文本节点内容
          // 替换模板内容
          nodeValue = nodeValue.replace( regMustache, function (node, value) {
            let val = data[value]
            return val
          })
          childNodes[i].nodeValue = nodeValue
        } else if (type == 1) { // 是元素节点
          compiler(childNodes[i], data)
        }
      }
    }
    // 渲染方法
    compiler(fragment, data)
    // 插入到真实dom里面
    app.appendChild(fragment)
  </script>
</body>
</html>